<template>
  <div
    class="line"
    :style="{ height: height ? height : '50px', width: width ? width : '80px' }"
  >
    <div class="line_right_down"></div>
    <div class="line_left_up"></div>
    <slot name="card"></slot>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, defineProps } from "vue";

defineProps({
  // 这个就是父组件在使用子组件时的属性值，也就是父组件的::son-value或者:sonValue
  height: String, // 注意这里的String的S是大写的，不是String，也可以用小写的string，看个人需求
  width: String,
});
</script>

<style scoped lang="scss">
.line {
  border: 2px solid rgba(14, 253, 255, 0.5);
  width: 25%;
  min-height: 60px;
  position: relative;

  .line_right_down {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 30px;
    height: 30px;
    display: block;
    background: url(../images/title_right_bg.png) no-repeat;
    background-size: cover;
  }
  .line_left_up {
    position: absolute;
    left: -4px;
    top: -10px;
    width: 100px;
    height: 10px;
    display: block;
    background: url(../images/title_left_bg.png) no-repeat;
    background-size: cover;
  }
}
</style>